@import '../../styles/fn';
.span_12_of_12{
  margin: 0 20px;
  float: none;
}
.block-nav-2 {
  background-color: #fafafa;
  .nav {
    > li {
      height: 70px;
      position: relative;
      display: flex;
      align-items: center;
      > a {
        border-radius: 23px;
        display: block;
        padding: 0 18px;
        color: #474747;
        font-size: 16px;
        letter-spacing: 0.025em;
        white-space: nowrap;
        height: 30px;
        line-height: 30px;
        @include boxSizing();
        @include lyby_donghua();
      }
      > span {
        width: 5px;
        height: 5px;
        background-color: #F8D247;
        position: absolute;
        top: 22px;
        right: 10px;
        border-radius: 50%;
      }
      > i {
        display: none;
        margin: -1px auto 0;
        width: 0;
        height: 1px;
        background-color: #F8D247;
        transition: all ease-out 200ms;
        -ms-transition: all ease-out 200ms;
        -moz-transition: all ease-out 200ms;
        -webkit-transition: all ease-out 200ms;
        -o-transition: all ease-out 200ms;
      }
      &:hover, &.hover {
        > a {
          background-color: #f8d247;
          opacity: .7;
          //color: #F8D247;
        }
        .sub {
          display: block;
        }
      }
      &.show-menu {
        //display: none;
        > a {
          padding-left: 0px;
        }
        .icon-menu-lg {
          background-color: #c0c0c0;
          @include borderRadius(3px);
        }
      }
      &.logo {
        margin-right: 33px;
        > a {
          padding-left: 0px;
        }
      }
      &.active {
        > a {
          background-color: #f8d247;
          //color: #F8D247;
        }
      }
      .sub {
        display: none;
        background-color: #fafafa;
        position: absolute;
        z-index: 100;
        li {
          cursor: pointer;
          width: 130px;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #F8D247;
          padding-left: 20px;
          position: relative;
          > span {
            width: 5px;
            height: 5px;
            background-color: #F8D247;
            position: absolute;
            right: 22px;
            border-radius: 50%;
            bottom: 32px;
          }
          > a {
            color : #474747;
            font-size : 16px;
            display: block;
            height: 100%;
            white-space: nowrap;
          }
          &:last-child{
            border-bottom: none;
          }
          &:hover {
            opacity: .7;
          }
        }
      }
    }
  }
  .search {
    display: block;
    position: relative;
    width: 16px;
    height: 27px;
    border-bottom: 1px solid transparent;
    z-index: 100;
    margin: 22px 0 0 18px;
    @include transitionAttr('width', 200);
    .btn-submit {
      position: absolute;
      left: 0;
      top: 3px;
      cursor: pointer;
      width: 16px;
      height: 18px;
      background: url("./img/search-top-befor.svg") no-repeat;
      background-size: 16px 18px;
      &:hover {
        background: url("./img/search-top-after.svg") no-repeat 0 1px;
      }
    }
    .query {
      display: none;
      position: absolute;
      left: 16px;
      width: 170px;
      background: transparent;
      border: none;
      padding: 0 8px;
      font-weight: normal;
      font-size: 14px;
      color: #7a7a7a;
      height: 26px;
      line-height: 26px;
    }
    .cate {
      display: none;
      position: absolute;
      left: 180px;
      width: 90px;
      background-color: rgb(250, 250, 250);
      cursor: pointer;
      font-size: 16px;
      .title {
        line-height: 26px;
        height: 26px;
        padding: 0 0 0 20px;
        .arrow {
          width: 11px;
        }
      }
      .select {
        line-height: 40px;
        display: none;
        > li {
          height: 40px;
          padding: 0 0 0 20px;
          //font-weight: bold;
          &:hover {
            background-color: #F36478;
            color: #fff;
          }
        }
      }
      &:hover {
        .title {
          .arrow {
            @include rotate(180)
          }
        }
        .select {
          display: block;
        }
      }
    }
    .hover {
      width: 300px;
      border-bottom-color: #d0d0d0;
      .btn-submit {
        left: auto;
        right: 10px
      }
      .query {
        display: block;
        left: 0px;
      }
      .cate {
        display: block;
      }
    }
  }
  .open-search {
    width: 300px;
    border-bottom-color: #d0d0d0;
    .btn-submit {
      left: auto;
      right: 10px
    }
    .query {
      display: block;
      left: 0px;
    }
    .cate {
      display: block;
    }
    .space {
      display: inline-block;
      width: 8px;
    }
  }

  .profile {
    > li {
      height: 70px;
      line-height: 70px;
      //&.reg, &.login {
      //  a {
      //    display: block;
      //    color: #7a7a7a;
      //    font-size: 16px;
      //    letter-spacing: 0.025em;
      //    white-space: nowrap;
      //    height: 70px;
      //    line-height: 70px;
      //    margin-left: 13px;
      //    svg.icon {
      //      fill: #7d7d7d;
      //      margin-right: 7px;
      //    }
      //    &:hover {
      //      color: #F8D247;
      //      svg.icon {
      //        fill: #F8D247;
      //      }
      //    }
      //  }
      //}
      &.reg, &.login {
        a {
          width: 88px;
        }
        .regbtn{
          @include lyby_button(#55A0EF,#FFF);
          margin-left:15px;
        }
      }
      &.active {
        background-color: #f0f0f0;
      }
    }
    //a {
    //  display: block;;
    //}
    .pic {
      margin: 0 12px;
      position: relative;
      z-index: 200;
      //padding-top: 23px;
      > .svg-icon {
        cursor: pointer;
      }
      .dot {
        width: 6px;
        height: 6px;
        background-color: #F8D247;
        border-radius: 50%;
        position: absolute;
        right: 0px;
        top: 20px;
      }
    }
    .menuUpload{
      position: relative;
      z-index: 100;
      .dropdown{
        width: 159px;
        @include borderRadius(5px);
        font-size: 16px;
        .content {
          padding: 10px;
          ul {
            line-height: 45px;
            text-align: center;
            li {
              border-bottom: 1px solid #2a2a2a;
              a:hover {
                color: #F36478
              }
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
    .user {
      width: 30px;
      height: 30px;
      -webkit-border-radius: 3px;
      /* background-color: #e1e1e1; */
      margin: 3px 0 0 12px;
      cursor: pointer;
      position: relative;
      z-index: 100;
      .avatar {
        width: 100%;
        border-radius: 50%;
      }
      .dropdown {
        width: 159px;
        @include borderRadius(5px);
        font-size: 16px;
        .content {
          padding: 10px;
          ul {
            line-height: 45px;
            text-align: center;
            li {
              border-bottom: 1px solid #2a2a2a;
              a:hover {
                color: #F36478
              }
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
    .message-dropdown {
      width: 284px;
      right: -50px;
      top: 70px;
      @include borderRadius(3px);
      .content {
        font-size: 14px;
        padding: 10px 16px;
        > .item {
          height: 57px;
          padding: 12px 0;
          border-bottom: 1px solid #434343;
          font-size: 13px;
          .flex {
            @include lyby_width_calc("100%-85px");
          }
        }
        .head {
          border-bottom: 1px solid #434343;
          height: 26px;
          line-height: 26px;
          font-size: 16px;
          position: relative;
          .icon-close-sm {
            position: absolute;
            right: 0px;
            top: 0px;
            cursor: pointer;
          }
        }
        .img {
          width: 34px;
          margin: 0 10px 0 0;
          @include borderRadius(3px);
          overflow: hidden;
        }
        .photo {
          width: 34px;
          margin: 0 0 0 5px;
          @include borderRadius(3px);
          overflow: hidden;
        }
        .title {
          margin-bottom: 8px;
          .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: bottom;
            font-weight: bold;
          }
        }
        .time {
          max-width: 80px;
          overflow: hidden;
          text-align: right;
          color: #717171;
          font-size: 12px;
        }
        .page {
          .prev,
          .next {
            margin-top: 10px;
            cursor: pointer;
            &:hover {
              color: #f36478;
            }
          }
        }
      }
    }
  }
}
.block-nav {
  background-color: #fafafa;
  .nav {
    > li {
      height: 70px;
      line-height: 70px;
      position: relative;
      > a {
        display: block;
        padding: 0 18px;
        color: #474747;
        font-size: 16px;
        letter-spacing: 0.025em;
        white-space: nowrap;
        height: 70px;
        @include boxSizing();
      }
      > span {
        width: 5px;
        height: 5px;
        background-color: #F8D247;
        position: absolute;
        top: 22px;
        right: 10px;
        border-radius: 50%;
      }
      > i {
        display: block;
        margin: -1px auto 0;
        width: 0;
        height: 1px;
        background-color: #F8D247;
        transition: all ease-out 200ms;
        -ms-transition: all ease-out 200ms;
        -moz-transition: all ease-out 200ms;
        -webkit-transition: all ease-out 200ms;
        -o-transition: all ease-out 200ms;
      }
      &:hover, &.hover {
        i {
          width: 100%;
        }
        .sub {
          display: block;
        }
      }
      &.show-menu {
        //display: none;
        > a {
          padding-left: 0px;
        }
        .icon-menu-lg {
          background-color: #c0c0c0;
          @include borderRadius(3px);
        }
      }
      &.logo {
        margin-right: 33px;
        > a {
          padding-left: 0px;
        }
      }
      &.active {
        > a {
          border-bottom: 1px solid #F8D247;
          background-color: #f4f4f4;
          color: #F8D247;
        }
      }
      .sub {
        display: none;
        background-color: #fafafa;
        position: absolute;
        z-index: 100;
        li {
          cursor: pointer;
          width: 130px;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #F8D247;
          padding-left: 20px;
          position: relative;
          > span {
            width: 5px;
            height: 5px;
            background-color: #F8D247;
            position: absolute;
            right: 22px;
            border-radius: 50%;
            bottom: 32px;
          }
          > a {
            color : #474747;
            font-size : 16px;
            display: block;
            height: 100%;
            white-space: nowrap;
          }
          &:last-child{
            border-bottom: none;
          }
          &:hover {
            opacity: .7;
          }
        }
      }
    }
  }
  .search {
    display: block;
    position: relative;
    width: 16px;
    height: 27px;
    border-bottom: 1px solid transparent;
    z-index: 100;
    margin: 22px 0 0 18px;
    @include transitionAttr('width', 200);
    .btn-submit {
      position: absolute;
      left: 0;
      top: 3px;
      cursor: pointer;
      width: 16px;
      height: 18px;
      background: url("./img/search-top-befor.svg") no-repeat;
      background-size: 16px 18px;
      &:hover {
        background: url("./img/search-top-after.svg") no-repeat 0 1px;
      }
    }
    .query {
      display: none;
      position: absolute;
      left: 16px;
      width: 170px;
      background: transparent;
      border: none;
      padding: 0 8px;
      font-weight: normal;
      font-size: 14px;
      color: #7a7a7a;
      height: 26px;
      line-height: 26px;
    }
    .cate {
      display: none;
      position: absolute;
      left: 180px;
      width: 90px;
      background-color: rgb(250, 250, 250);
      cursor: pointer;
      font-size: 16px;
      .title {
        line-height: 26px;
        height: 26px;
        padding: 0 0 0 20px;
        .arrow {
          width: 11px;
        }
      }
      .select {
        line-height: 40px;
        display: none;
        > li {
          height: 40px;
          padding: 0 0 0 20px;
          //font-weight: bold;
          &:hover {
            background-color: #F36478;
            color: #fff;
          }
        }
      }
      &:hover {
        .title {
          .arrow {
            @include rotate(180)
          }
        }
        .select {
          display: block;
        }
      }
    }
    .hover {
      width: 300px;
      border-bottom-color: #d0d0d0;
      .btn-submit {
        left: auto;
        right: 10px
      }
      .query {
        display: block;
        left: 0px;
      }
      .cate {
        display: block;
      }
    }
  }
  .open-search {
    width: 300px;
    border-bottom-color: #d0d0d0;
    .btn-submit {
      left: auto;
      right: 10px
    }
    .query {
      display: block;
      left: 0px;
    }
    .cate {
      display: block;
    }
    .space {
      display: inline-block;
      width: 8px;
    }
  }

  .profile {
    > li {
      height: 70px;
      line-height: 70px;
      //&.reg, &.login {
      //  a {
      //    display: block;
      //    color: #7a7a7a;
      //    font-size: 16px;
      //    letter-spacing: 0.025em;
      //    white-space: nowrap;
      //    height: 70px;
      //    line-height: 70px;
      //    margin-left: 13px;
      //    svg.icon {
      //      fill: #7d7d7d;
      //      margin-right: 7px;
      //    }
      //    &:hover {
      //      color: #F8D247;
      //      svg.icon {
      //        fill: #F8D247;
      //      }
      //    }
      //  }
      //}
      &.reg, &.login {
        a {
          width: 88px;
        }
        .regbtn{
          @include lyby_button(#55A0EF,#FFF);
          margin-left:15px;
        }
      }
      &.active {
        background-color: #f0f0f0;
      }
    }
    //a {
    //  display: block;;
    //}
    .pic {
      margin: 0 12px;
      position: relative;
      z-index: 200;
      //padding-top: 23px;
      > .svg-icon {
        cursor: pointer;
      }
      .dot {
        width: 6px;
        height: 6px;
        background-color: #F8D247;
        border-radius: 50%;
        position: absolute;
        right: 0px;
        top: 20px;
      }
    }
    .menuUpload{
      position: relative;
      z-index: 100;
      .dropdown{
        width: 159px;
        @include borderRadius(5px);
        font-size: 16px;
        .content {
          padding: 10px;
          ul {
            line-height: 45px;
            text-align: center;
            li {
              border-bottom: 1px solid #2a2a2a;
              a:hover {
                color: #F36478
              }
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
    .user {
      width: 34px;
      height: 34px;
      -webkit-border-radius: 3px;
      background-color: #e1e1e1;
      margin: 8px 0 0 12px;
      cursor: pointer;
      position: relative;
      z-index: 100;
      .avatar {
        width: 100%;
        border-radius: 50%;
      }
      .dropdown {
        width: 159px;
        @include borderRadius(5px);
        font-size: 16px;
        .content {
          padding: 10px;
          ul {
            line-height: 45px;
            text-align: center;
            li {
              border-bottom: 1px solid #2a2a2a;
              a:hover {
                color: #F36478
              }
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
    .message-dropdown {
      width: 284px;
      right: -50px;
      top: 70px;
      @include borderRadius(3px);
      .content {
        font-size: 14px;
        padding: 10px 16px;
        > .item {
          height: 57px;
          padding: 12px 0;
          border-bottom: 1px solid #434343;
          font-size: 13px;
          .flex {
            @include lyby_width_calc("100%-85px");
          }
        }
        .head {
          border-bottom: 1px solid #434343;
          height: 26px;
          line-height: 26px;
          font-size: 16px;
          position: relative;
          .icon-close-sm {
            position: absolute;
            right: 0px;
            top: 0px;
            cursor: pointer;
          }
        }
        .img {
          width: 34px;
          margin: 0 10px 0 0;
          @include borderRadius(3px);
          overflow: hidden;
        }
        .photo {
          width: 34px;
          margin: 0 0 0 5px;
          @include borderRadius(3px);
          overflow: hidden;
        }
        .title {
          margin-bottom: 8px;
          .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: bottom;
            font-weight: bold;
          }
        }
        .time {
          max-width: 80px;
          overflow: hidden;
          text-align: right;
          color: #717171;
          font-size: 12px;
        }
        .page {
          .prev,
          .next {
            margin-top: 10px;
            cursor: pointer;
            &:hover {
              color: #f36478;
            }
          }
        }
      }
    }
  }

  //.pic {
  //  padding-left: 0px !important;
  //  padding-top: 15px !important;
  //}
  //a.text:hover {
  //  border-bottom: 1px solid #F8D247;
  //}
  //.login a {
  //  border-right: 1px solid #333333;
  //}
  //.login a,
  //.reg a {
  //  margin-top: 28px;
  //  padding: 0 5px;
  //  text-decoration: none;
  //  color: #333;
  //}
}

.dropdown {
  position: absolute;
  top: 41px;
  width: 286px;
  background-color: #303030;
  color: #ffffff;
  text-align: left;
  &.hide {
    display: none;
  }
  .arrow {
    i {
      position: absolute;
      top: -5px;
      left: 50%;
      content: " ";
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #303030;
      font-size: 0;
      line-height: 0;
    }
  }
  .content {
    padding: 20px;
  }
  a {
    color: #fff;
  }
}

.svg-icon{
  path{
    fill: #a1a1a1;
  }
  &.hover{
    path{
      fill: #f36478;
    }
  }
  &:hover{
    path{
      fill: #f36478;
    }
  }
}

.icon {
  background: url(./img/icons-25.png) no-repeat;
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;

  &.big{
    width: 40px;
    height: 40px;
    background-image: url(./img/icons-40.png);
  }
  &.small{
    width: 20px;
    height: 20px;
    background-image: url(./img/icons-20.png);
  }
}

.adjust{
  width:94% !important;
  margin:0 3%;

  .overflow,.span_3_of_12List{
    overflow: hidden;
    visibility: hidden;
  }

  .span_3_of_12List{
    float:left;
  }

  .pics .col,.designer-with-pics .col{
    margin:0;
    padding:0 10px 15px;

  }
  @media all and (max-width: 780px){
    .span_3_of_13 {
      width:50%;
    }
    .pics .span_3_of_12{
      width:50%;
    }
    .designer-with-pics .mod-designer{
      width:100%;
    }
    .span_3_of_12List{
      width:100%;

      .span_3_of_12{
        width:50%;
      }
    }
  }
  @media all and (min-width: 781px) and (max-width: 1004px){
    .span_3_of_13 {
      width:33.3%;
    }
    .pics .span_3_of_12{
      width:33.3%;
    }
    .designer-with-pics .mod-designer{
      width:33.3%;
    }
    .span_3_of_12List{
      width:66.7%;

      .span_3_of_12{
        width:50%;
      }
    }
  }
  @media all and (min-width: 1005px){
    .span_3_of_13 {
      width:33.3%;
    }
    .span_3_of_12,.mod-designer{
      width:25%;
    }
    .span_3_of_12List{
      width:75%;

      .span_3_of_12{
        width:33.3%;
      }
    }
  }
  @media all and (min-width: 1401px){
    .span_3_of_13 {
      width:25%;
    }
    .span_3_of_12,.mod-designer{
      width:20%;
    }
    .span_3_of_12List{
      width:80%;

      .span_3_of_12{
        width:25%;
      }
    }
  }
  @media all and (min-width: 1901px){
    .span_3_of_13 {
      width:20%;
    }
    .span_3_of_12,.mod-designer{
      width:16.6%;
    }
    .span_3_of_12List{
      width:83.4%;

      .span_3_of_12{
        width:20%;
      }
    }
  }
  @media all and (min-width: 2541px){
    .span_3_of_13 {
      width:16.6%;
    }
    .span_3_of_12,.mod-designer{
      width:14.2%;
    }
    .span_3_of_12List{
      width:85.8%;

      .span_3_of_12{
        width:16.6%;
      }
    }
  }
  @media all and (min-width: 3821px){
    .span_3_of_13 {
      width:14.2%;
    }
    .span_3_of_12,.mod-designer{
      width:12.5%;
    }
    .span_3_of_12List{
      width:87.5%;

      .span_3_of_12{
        width:14.2%;
      }
    }
  }
}